<template>
  <div>
    <!-- 公告头部 -->
    <wHeader></wHeader>
    <!-- 侧边导航 -->
    <wSidebar></wSidebar>
    <!-- 主体内容区 -->
    <div class="wBody-area" :class="{ collapse: collapse }">
      <!-- 标签 -->
      <wTags></wTags>
      <!-- 内容区 -->
      <div class="wBody-main">
        <transition name="move" mode="out-in">
          <keep-alive :include="tagsList">
            <router-view></router-view>
          </keep-alive>
        </transition>
      </div>
    </div>
  </div>
</template>
<script>
import wHeader from "@/components/public/Header.vue";
import wSidebar from "@/components/public/Sidebar.vue";
import wTags from "@/components/public/Tags.vue";
export default {
  name: "home",
  data() {
    return {};
  },
  components: {
    wHeader,
    wSidebar,
    wTags,
  },
  computed: {
    // 侧边栏是否关闭
    collapse() {
      return this.$store.state.sidebar;
    },
    // tags做缓存-include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
    tagsList() {
      let tagsList = this.$store.state.tagsList;
      let arr = [];
      for (let i = 0, len = tagsList.length; i < len; i++) {
        tagsList[i].name && arr.push(tagsList[i].name);
      }
      return arr;
    },
  },
};
</script>
<style lang="less">
@import "~@/assets/css/publicStyle.less";
// 主体内容区
.wBody-area {
  position: fixed;
  top: @wHeight_header;
  left: @wWidth_sidebar_o;
  right: 0;
  bottom: 0;
  z-index: 1;
  background-color: #ffffff;
  transition: all 0.3s linear;

  &.collapse {
    left: @wWidth_sidebar_c;
    transition: all 0.3s linear;
  }

  .wBody-main {
    position: absolute;
    top: 30px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
  }
}
</style>